<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#but1").click(function(){
                alert("Background color = " + $("p").css("background-color"))
            })
            //修改单个属性 颜色
            $("#but2").click(function(){
                 $("p").css("background-color","yellow")
            })
            //修改多个属性 颜色+大小
            // $("#but2").click(function(){
            //      $("p").css({"background-color":"yellow","font-size":"200%"})
            // })
        })
    </script>
    <title></title>
</head>

<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button id="but1">返回 p 元素的背景色</button>
<button id="but2">修改 p 元素的背景色</button>
</body>
</html>